<script>
export default {
  name: "fixed-bottom",
  props:{
    className: {
      type: String,
      default: ''
    },
    isFixed:{
      type: Boolean,
      default: false
    },
    bgColor:{
      type: String,
      default: 'transparent'
    },
    styles:{
      type: Object,
      default: () => {}
    }
  }
}
</script>

<template>
  <view
      style="width: 100%; left: 0; z-index: 1000;"
      :class="{
            'fixed bottom-0': isFixed,
            className: true
        }"
      :style="{
            background: bgColor,
            ...styles
        }"
  >
    <slot></slot>
    <view class="safe-area-inset-bottom"></view>
  </view>
</template>

<style scoped lang="scss">
.fixed{
  position: fixed;
}
.bottom-0{
  bottom: 0;
}
</style>
